<template>
  <div class="login_page">

    <div class="l_div">
      <div class="l_title">Junyi Facade consultation service</div>
      <div class="l_name">后台管理系统，请登录！</div>
      <div class="l_input">
        <el-input v-model="username" placeholder="请输入您的账号" class="input_login"></el-input>
      </div>
      <div class="l_input">
        <el-input v-model="password" placeholder="请输入密码"  show-password class="input_login"></el-input>
      </div>
      <div class="l_btn btn" @click="login()">立即登录</div>
      <div class="l_notice">
      </div>
    </div>
  </div>
</template>
<script>

  // 1、export 表示导出,在自定义组件里面使用export default导出
  export default {
  // name 表示设置别名，可以不设置，建议和组件的名称一致
    name:"Login",
    data(){
      return{
        username:'',
        password:'',
      }
    },
    methods:{
      login () {
        if(this.username == ''){
          this.$message.error('请输入用户名')
          return
        }
        if(this.password == ''){
          this.$message.error('请输入密码')
          return
        }

        this.$axios.post('/login?username='+this.username+'&password='+this.password, {
          params: {}
        }).then(r => {
          let res = r.data
          if (res.code !== 1) {
            this.$message.error(res.msg)
            return
          }
          window.vm.$cookies.set('token',res.data)
          this.$parent.hiddenLogin();

          this.$axios.get('/admin/user/my-info', {
            params: {
            }
          }).then(r => {
            let  res = r.data
            window.vm.$cookies.set('user',res.data)
//            console.info(res)
            location.reload()
        }).catch(() => {

        });


        })
      }
    }
  }

</script>

<style scoped>
  .l_div{
    /*width: 60%;*/
    /*height: 50%;*/
    margin-left: 32px;
    margin-top: 24px;
    margin-right: 32px;
  }
  .l_title{
    font-size: 32px;
    font-weight: 500;
    color: #303030;
  }
  .l_name{
    font-size: 16px;
    font-weight: 400;
    color: #303030;
    margin-top: 10px;
    line-height: 19px;
  }


  .l_btn{
    /*background: linear-gradient(90deg, #386CE9 0%, #5B79FB 100%);*/
    /*color: #FFFFFF;*/
    font-size: 16px;
    border-radius: 33px 33px 33px 33px;
    width: 242px;
    height: 40px;
    line-height: 40px;
    margin-top: 64px;
    text-align: center;
    margin-left: calc((100% - 250px) / 2);
  }
  .l_input{
    margin-top: 45px;
  }
  .l_input:first-child{
    margin-top: 50px;
  }
  .l_notice{
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 100px;
    width: calc(100% - 64px);
    color: #646466;
  }
  .l_notice a{
    color: #8cb2ff;
  }
  /deep/.input_login input {
    border: none;
    border-bottom: 1px solid #DCDFE6;
  }
  .login_page{
    width: 50%;
    margin-left: calc(25%);
    margin-top: calc(50vh - 300px);
    height: 350px;
  }

</style>
